<template>
  <div class="page-box h100 display-flex czbj fgdgtte">
    <n-form inline size="normal">
      <n-form-item>
        <n-button
          type="info"
          size="medium"
          class="ml10"
          @click="handleValidateClick"
          >保存</n-button
        >

        <n-popover placement="bottom" trigger="hover">
          <template #trigger>
            <n-button type="info" size="medium" class="ml10" @click="fuzhi"
              >点击复制分享链接</n-button
            >
          </template>
          <div class="large-text">
            <img
            class="qc-img"
              :src="prefixS+'public/QRcode?text='+prefixS+'fabu'"
            />
          </div>
        </n-popover>
      </n-form-item>
    </n-form>

    <n-form
      class="mt20"
      ref="formRef"
      label-placement="left"
      label-width="100px"
      require-mark-placement="right-hanging"
      size="medium"
      :style="{
        maxWidth: '1000px',
      }"
      :model="formValue"
      :rules="rules"
    >
      <n-grid :cols="24" :x-gap="20">
        <n-form-item-gi :span="12" label="logo" path="logo">
          <div
            class="headPortrait-box vertical-center sz"
            @click="photoShowModal = true"
          >
            <img :src="formValue.logo" v-if="formValue.logo" />
            <i class="iconfont dx-tupian fz30" v-else> </i>
          </div>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="应用名称" class="mt20" path="title">
          <n-input
            type="text"
            placeholder="请输入应用名称"
            size="medium"
            v-model:value="formValue.title"
            clearable
          ></n-input>
        </n-form-item-gi>
        <n-form-item-gi
          :span="12"
          label="应用描述"
          class="mt20"
          path="describe"
        >
          <n-input
            type="text"
            placeholder="请输入应用描述"
            size="medium"
            v-model:value="formValue.describe"
            clearable
          ></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="h5访问地址" class="mt20">
          <n-input
            type="text"
            placeholder="请输入h5访问地址"
            size="medium"
            clearable
            v-model:value="formValue.h5url"
          ></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="上传app" class="mt20" path="appurl">
          <div class="display-flex">
            <div>
              <n-upload
                :max="1"
                :action="prefixS + 'public/Upimg'"
                :data="upload"
                accept=".apk"
                @Finish="getImgs"
                @before-upload="appload = true"
              >
                <n-button :loading="appload" type="primary"
                  >点击{{ !formValue.appurl ? "上传" : "修改" }}app</n-button
                >
              </n-upload>
            </div>
            <div class="flex-1 mt5">
              <a
                class="ls ml20"
                :href="formValue.appurl"
                download="true"
                v-if="formValue.appurl"
                >点击下载</a
              >
            </div>
          </div>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="app版本" class="mt20">
          <n-input
            type="text"
            placeholder="请输入h5访问地址"
            size="medium"
            clearable
            v-model:value="formValue.versions"
          ></n-input>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="升级包" class="mt20" path="appurl">
          <div class="display-flex">
            <div>
              <n-upload
                :max="1"
                :action="prefixS + 'public/Upimg'"
                :data="upload"
                accept=".wgt"
                @before-upload="wgtload = true"
                @Finish="getImgser"
              >
                <n-button type="primary"
                  >点击{{
                    !formValue.UpgradePackageAddress ? "上传" : "修改"
                  }}app升级包</n-button
                >
              </n-upload>
            </div>
            <div class="flex-1 mt5">
              <a
                class="ls ml20"
                :href="formValue.UpgradePackageAddress"
                download="true"
                v-if="formValue.UpgradePackageAddress"
                >点击下载</a
              >
            </div>
          </div>
        </n-form-item-gi>

        <n-form-item-gi :span="24" label="软件截图" path="screenshot">
          <div class="display-flex">
            <div
              class="headPortrait-box vertical-center sz pr mr10"
              v-for="(item, idx) in yyjt"
              :key="idx"
            >
              <n-image class="dfdsrrte" :src="item" />
              <img
                src="../../assets/img/close.png"
                class="closepng"
                @click="sanchusee(idx)"
              />
            </div>

            <div
              class="headPortrait-box vertical-center sz"
              @click="photoShowModaler = true"
            >
              <i class="iconfont dx-tupian fz30"> </i>
            </div>
          </div>
        </n-form-item-gi>
      </n-grid>
    </n-form>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>logo上传</div>
      </template>
      <div>
        <photoGallery @getImg="getImg" types="appLogo"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>应用截图</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="yinyongjietu"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { ref, h, computed } from "vue";
import { NTooltip, NPopover } from "naive-ui";
import { dxpost, prefixS, dxget } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
const photoShowModal = ref(false);
const photoShowModaler = ref(false);
const appload = ref(false);
const wgtload = ref(false);
const logo = ref();
const yyjt = ref([]);
const formRef = ref();
const formValue = ref({
  id: 1,
  logo: "",
  title: "",
  screenshot: "",
  describe: "",
  appurl: "",
  h5url: "",
  versions: "",
  UpgradePackageAddress: "",
});
const rules = {
  logo: {
    required: true,
    message: "请上传log",
    trigger: "blur",
  },
  title: {
    required: true,
    message: "请输入应用名称",
    trigger: "blur",
  },
  screenshot: {
    required: true,
    message: "请上传应用截图",
    trigger: "blur",
  },
  describe: {
    required: true,
    message: "请输入应用描述",
    trigger: "blur",
  },
  appurl: {
    required: true,
    message: "请上传apk",
    trigger: "blur",
  },
};

const upload = {
  typeName: "app",
};

let logoImg = null;
let logoImger = null;
const getImg = (img) => {
  logoImg = img;
};
const getImger = (img) => {
  logoImger = img;
};
const setImg = () => {
  formValue.value.logo = logoImg;
  photoShowModal.value = false;
};
const setImger = () => {
  yyjt.value.push(logoImger);
  photoShowModaler.value = false;
};
const getImgs = async (a) => {
  const responseText = JSON.parse(a.event.currentTarget.responseText);
  formValue.value.appurl = responseText.data.imgurl;
  appload.value = false;
  window.$message.success("上传成功");
};
const getImgser = async (a) => {
  const responseText = JSON.parse(a.event.currentTarget.responseText);
  formValue.value.UpgradePackageAddress = responseText.data.imgurl;
  wgtload.value = false;
  window.$message.success("上传成功");
};

const sanchusee = (idx) => {
  yyjt.value.splice(idx, 1);
};
const init = async () => {
  const { data }: any = await dxget("dxgjAdmin/app_issue");
  formValue.value = data[0];
  yyjt.value = formValue.value.screenshot.split(",");
};
init();
const handleValidateClick = (e: MouseEvent) => {
  formValue.value.screenshot = yyjt.value.join(",");
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      let { errno }: any = await dxpost(
        "dxgjAdmin/app_issue",
        formValue.value,
        "PUT"
      );
      if (errno == 0) {
        window.$message.success("操作成功！");
      }
    }
  });
};
const fuzhi = () => {
  navigator.clipboard.writeText(prefixS+'fabu');
  window.$message.success("复制成功！");
};
</script>

 <style scoped>
.dfdsrrte {
  position: relative;
}
.closepng {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 20px;
  height: 20px;
}
.qc-img{
  width: 150px;
  height: 150px;
}
</style>